<template>
    <div class="subDiv" >这是子模块的地盘了<br>
        <h1>TS Props</h1>
        <!-- <h2>{{ a }}</h2> -->
        <ul>
            <li v-for="item in list" :key="item.id">{{ item.name }}</li>
        </ul>
        
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import {type PersonInter,type Persons} from '@/types'
    // import { defineProps,withDefaults } from 'vue';
    // 默认宏函数可以不引入
    let person:PersonInter = {id:1,name:'张三',age:20}
    // 只接收
    //defineProps(['a','list'])
    // 接收+限制类型
    //defineProps<{list:Persons}>()
    // 接收+限制类型+限制必要性+指定默认值
    // list 就是默认值，但是必须要写成一个函数，如果父亲不传值，则默认展示康师傅
    withDefaults(defineProps<{list?:Persons}>(),{
        list:()=>[
            {id:999,name:'康师傅',age:99}
        ]})

</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(188, 186, 186);
        width: 770px;
        height: 300px;
        font-size: 15px;
        font-weight: 800;
        position:absolute;
        top:100px;
        border-radius: 20px;
        /** text-align: center;  */
        padding-left: 30px;
        padding-top: 30px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        margin: 10px;
        }
    h1{
        font-size: 20px;
    }
    h2{
        font-size: 18px;
    }
</style>